<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/index.css">

		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="../css/lcs-pop.css"/>
		<link rel="stylesheet" type="text/css" href="css/empcss.css"/>
		<link rel="stylesheet" type="text/css" href="css/compatible.css"/>
		<style>
			body{
				padding-bottom: 50px;
			}
		</style>
		<script type="text/javascript">
			var setData = {date_type:"date", date:"today"};
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg ">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">客流统计</h1>
		</header>
		<div class="mui-content">
		    
		
		<main id="content">
			<section class="tab clear mui-content">
				<div class="mui-row member-url financial-tab" data-d="/api/member/guest_flow_census" onclick="changeData(event)">
					<div class="tab-item mui-col-xs-4 active gets" data-d="/api/member/guest_flow_census">会员散客</div>
					<div class="tab-item mui-col-xs-4 gets" data-d="/api/member/gender_census">男女客</div>
					<div class="tab-item mui-col-xs-4 gets" data-d="/api/member/appoint_flow_census">指定非指定</div>
				</div>
				<!-- <div class="data-change">
					<span class="data-change-left data-change-btn"><i class="mui-icon mui-icon-arrowleft"></i></span>
					2018年11月
					<span class="data-change-right data-change-btn"><i class="mui-icon mui-icon-arrowright"></i></span>
				</div> -->
			</section>
			<div class="passengerflow-title text-center">
				<h3>总客数 <span id="all_people_count">0</span></h3>
				<h3>总业绩 <span id="all_order_money">0</span></h3>
			</div>
			<div id="analysis" style="height: 400px; padding-bottom: 20px;"></div>

			<div id="popover" class="mui-popover">
				<div class="listdiv">
					<div class="mui-input-row borbot" >
						<label>开始时间:</label>
						<div class="place items">
							<button id='starttime' data-time="" onclick="changTime(event)" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">开始时间</button>
						</div>
					</div> 
					<div class="mui-input-row borbot" >
						<label>结束时间:</label>
						<div class="place items">
							<button id='endtime' data-time="" onclick="changTime(event)" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">结束时间</button>
						</div>
					</div>
					<button type="button" id="okbut" class="mui-btn mui-btn-blue mui-btn-block">确定</button>
				</div>
			</div>
		</main>
		<footer id="footer">
			<ul class="mui-row text-center passengerflow-footer member-day" data-d="today" onclick="changeData(event)">
				<li class="mui-col-xs-4 active gets" data-d="today">今天</li>
				<li class="mui-col-xs-4 gets" data-d="week">本周</li>
				<li class="mui-col-xs-4" onclick="timeStep(event)">时间段</li>
			</ul>
		</footer>
		</div>
	</body>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.min.js"></script>
	<script src="js/echarts.js"></script>
	<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>

	<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>

	<script src="js/commont.js"></script>
	<script type="text/javascript">
		//mui.init()
		
		var analysis = document.getElementById("analysis");
		var myChart = echarts.init(analysis);
		
		function fn(_data){
			if(_data.hasOwnProperty('female_number')){
				var data = [
					{value:_data.male_number, name: '男', itemStyle : {color : '#F95F3B'}},
					{value:_data.female_number, name: '女', itemStyle : {color : '#FFB321'}}
				]
				var _title = ['男', '女']
				var pieName = '男女客'
			}else if(_data.hasOwnProperty('guest_count')){
				var data = [
					{value:_data.guest_count, name: '散客', itemStyle : {color : '#F95F3B'}},
					{value:_data.member_count, name: '会员', itemStyle : {color : '#FFB321'}}
				]
				var _title = ['散客', '会员']
				var pieName = '会员散客'
			}else{
				var data = [
					{value:_data.appoint_number, name: '指定', itemStyle : {color : '#F95F3B'}},
					{value:_data.non_appoint_number, name: '非指定', itemStyle : {color : '#FFB321'}}
				]
				var _title = ['指定', '非指定']
				var pieName = '指定非指定'
			}
			
			var option = {
			
				tooltip : {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					// orient: 'vertical',
					// top: 'middle',
					bottom: 10,
					left: 'center',
					data: _title
				},
				series : [
					{
						name : pieName,
						type: 'pie',
						radius : '55%',
						center: ['50%', '36%'],
						selectedMode: 'single',
						data:data,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};
			return option
		}
		
		function changeData(e){
			var _that = $(e.target);
			
			if(_that.is('.gets')){
				var _d = _that.data('d')
				_that.parent().data('d', _d);
				_that.addClass('active').siblings().removeClass('active')
				requireData()
			}
			
		}
		
		requireData();
		
		function requireData(){
			var url = $('.member-url').data('d')
			var type = $('.member-day').data('d')
			var _data = {
				access_token: acctoken(),
			}
			var d = dayType(type)
			
			_data = Object.assign(_data, d);
			
			ajax({
				url : url,
				data : _data
			}, function (res){
				var data = res.data;
				//console.log(data)
				$('#all_people_count').text(data.all_people_count)
				$('#all_order_money').text(data.all_order_money)
				
				setEcharts(myChart, data, fn);
			})
		}
		
		
		function dayType(type){
			//var data = {};
			
			switch(type){
				case 'week':
					var step = calcDay(type);
					step['date_type'] = 'custom';
					return step;
				
				break;
				case 'month':
					var step = calcDay(type);
					step['date_type'] = 'custom';
					return step;
				break;
				case 'today':
				default:
					return {
						date_type : 'date',
						date : 'today'
					}
			}
		}
		
		function calcDay(type){
			var today = new Date();
			var oneDay = 24 * 3600 * 1000;
			var _data = {};
			
			switch(type){
				case 'week':
					var w = today.getDay();
					var ts = today.getTime()
					var start = ts - oneDay * w;
					var end = start + 6 * oneDay;
					
					start = new Date(start)
					end = new Date(end)
					
					_data['start_time'] = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate()
					_data['end_time'] = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate()
					//console.log(new Date(start))
				break;
				case 'month' :
					var month = today.getMonth() + 1;
					var year = today.getFullYear();
					
					_data['start_time'] = year + '-' + month + '-' + '1';
					if(month == 12){
						year += 1;
						month = 1;
					}else{
						month += 1;
					}
					
					var end = year + '/' + month + '/' + '1';
					var end_s = (new Date(end)).getTime() - oneDay;
					var end_day = new Date(end_s);
					
					_data['end_time'] = end_day.getFullYear() + '-' + (end_day.getMonth() + 1) + '-' + end_day.getDate()
					
				break;
			}
			
			return _data;
		}
		
		
		window.addEventListener("resize", function (){
			myChart.resize();
		});
</script>
</html>
